			<template>
				<view class="animated fadeIn faster">
					<view class="m-3 font32">
						<text>选择充值金额</text>
					</view>

					<view class="py-1 px-1-5 d-flex d-flex-wrap d-flex-unShrink px-1 pb-0">
						<view class="vip-box p-2" v-for="(item,iii) in chargeList" :key="item.id">
							<view class="vip-item py-5" :class="{'vip-item-on':payIndex == iii}" @click="changePayItem(iii)">
								<view class="d-flex d-flex-center d-flex-middle"><text>赠送</text><text
										class="colorprice">￥{{parseFloat(item.give_amount)}}</text></view>
								<view class="d-flex d-flex-center mt-1">
									<view class="d-flex d-flex-baseline">
										<text class="font24 font-bold">￥</text><text
											class="font40 font-bold">{{parseFloat(item.price)}}</text>
									</view>
								</view>

							</view>
						</view>
					</view>
					
					<view class="r-bottom">
						<view class="d-flex px-3 d-flex-middle mb-2 mt-5 pt-0">
							<checkbox :checked="isChecked" color="#fb4f45" style="transform:scale(0.6)"
								@click="isChecked = !isChecked"></checkbox>
							<view>
								<text class="font24 color999" @click="isChecked = !isChecked">我已阅读并同意</text>
								<text class="font24 color000" @click="goUrl('/subPages/agreement/agreement')">《用户协议》</text>
								<text class="font24 color999">和</text>
								<text class="font24 color000" @click="goUrl('/subPages/privacy/privacy')">《隐私条款》</text>
							</view>
						</view>
						<view class="d-flex d-flex-center " @click="openPay">
							<view class="money-sure-btn-bg bgcolor598dfc colorfff d-flex d-flex-middle d-flex-center font30">立即充值</view>
						</view>
					</view>
				</view>
			</template>

			<script>
				import {
					mapState
				} from "vuex"
				import { payApi } from '@/http/payApi';
				import pay from '@/mixins/pay.js'
				export default {
					mixins:[pay],
					data() {
						return {
							payIndex:0,
							isChecked:false,
							refresh: true,
							callback: false,
							chargeList: [{
								give_amount: "20.00",
								id: 1,
								price: "200.00",
							}, {
								give_amount: "50.00",
								id: 2,
								price: "500.00"
							}]
						}
					},
					computed: {
						...mapState({
							balance:state => state.balance,
							nickName: state => state.nickName,
							phone: state => state.phone,
							avatar: state => state.avatar,
							loginState: state => state.loginState,
						})
					},
					onLoad() {
						this.getCharge()
					},
					methods: {
						changePayItem(index){
							this.payIndex = index
						},
						moveHandle() {
							return false
						},
						async getCharge(){
							let chargeList = await payApi.getCharge()
							this.chargeList = chargeList
						},
						openPay(){
							if(!this.isChecked){
								uni.showToast({
									title:'请同意用户隐私协议',
									icon:'none'
								})
								return
							}
							this.confirmPay()
						},
						async confirmPay(){
							let that = this
							try {
								uni.showLoading({title:'订单创建中...'})
								const order = await payApi.payCharge({'resource_id':that.chargeList[that.payIndex].id})
								uni.hideLoading()
								if(order && order.order_no){
									that.clientTransferPay(order.order_no)
								}
							} catch (error) {
								console.log('error',error)
							}
						},
						goUrl(urlPages) {
							uni.navigateTo({
								url: urlPages
							})
						},
					}
				}
			</script>

			<style scoped>
				.headbg {
					background-color: #00d7c6;
					height: 150rpx;
					padding-top: 50rpx;
					border-bottom-right-radius: 30rpx;
					border-bottom-left-radius: 30rpx;
				}

				.moeny-box {
					height: 150rpx;
					border-top-right-radius: 20rpx;
					border-top-left-radius: 20rpx;
					background-color: #0a1b19;
					width: 690rpx;
					color: #7a6f49;
				}

				.money-price {
					color: #fbc691
				}
				
				
				.bgcolor598dfc {
					background-color: #598dfc;
				}

				.money-sure-btn-bg {
					border-radius: 50rpx;
					height: 84rpx;
					width: 690rpx;
				}

				.money-cancel-btn-bg {
					background-color: #38aa84;
					color: #ffffff;
					border-radius: 50rpx;
					height: 84rpx;
					width: 530rpx;
				}

				.vip-box {
					width: 44%;
				}

				.vip-item {
					width: 100%;
					border-radius: 20rpx;
					position: relative;
					background: #F6F8FA;
					border: 1rpx solid #F6F8FA;
				}

				.vip-item-on {
					color: #FF8900;
					border: 1rpx solid #FF8900;
				}

				.vip-item-on .vip-tag {
					color: #FF8900;
				}

				.vip-item-on .font26 {
					color: #FF8900;
				}

				.vip-item-on .font-bold {
					color: #FF8900;
				}
				
				.r-bottom {
					position: absolute;
					text-align: center;
					bottom: 60rpx;
					left: 30rpx;
				}
			</style>